<template>
    <ElTable class="list-table is-border" height="720" :span-method="spanMethod" :="$attrs" border :data="list">
        <ElTableColumn label="客户名称" prop="khmc" align="center"></ElTableColumn>
        <ElTableColumn label="店铺名称" prop="dpmc" align="center"></ElTableColumn>
        <ElTableColumn label="业务名称" prop="ywmc" align="center"></ElTableColumn>
        <ElTableColumn label="分配公司" prop="companyName" align="center"></ElTableColumn>
        <ElTableColumn label="分配底薪" prop="fpgsDx" align="center"></ElTableColumn>
        <ElTableColumn label="分配公司开始日期" prop="ksrq" align="center">
            <template #default="{ row }">
                {{ row.ksrq ? row.ksrq.split(' ')[0] : '' }}
            </template>
        </ElTableColumn>
        <ElTableColumn label="分配公司结束日期" prop="jsrq" align="center">
            <template #default="{ row }">
                {{ row.jsrq ? row.jsrq.split(' ')[0] : '' }}
            </template>
        </ElTableColumn>

        <ElTableColumn label="分配客服花名" prop="kfhm" align="center"></ElTableColumn>
        <ElTableColumn label="分配客服开始日期" prop="fpkfKsrq" align="center">
            <template #default="{ row }">
                {{ row.fpkfKsrq ? row.fpkfKsrq.split(' ')[0] : '' }}
            </template>
        </ElTableColumn>
        <ElTableColumn label="分配客服结束日期" prop="fpkfJsrq" align="center">
            <template #default="{ row }">
                {{ row.fpkfJsrq ? row.fpkfJsrq.split(' ')[0] : '' }}
            </template>
        </ElTableColumn>
        <ElTableColumn label="分配客服底薪" prop="fpkfDx" align="center"></ElTableColumn>
        <ElTableColumn label="提成比例" prop="kfTcbl" align="center"></ElTableColumn>
        <ElTableColumn prop="_action1" label="操作分配记录" fixed="right" :min-width="90" header-align="center" align="center">
            <template #default="{ row }">
                <ElButton type="primary" link @click="$emit('fpkfRevoke', row)">撤销</ElButton>
            </template>
        </ElTableColumn>
        <ElTableColumn prop="_action" label="操作" fixed="right" :min-width="90" header-align="center" align="center">
            <template #default="{ row }">
                <ElButton type="primary" link @click="$emit('openZzhFpkf', row)">分配客服</ElButton>
            </template>
        </ElTableColumn>
    </ElTable>
</template>

<script setup lang="ts">
import { ElTableColumn } from 'element-plus';
import { computed } from 'vue'
import { addRowAndColSpan } from '@/utils/zeo'

interface Props {
    data?: any[],
}

const props = withDefaults(defineProps<Props>(), {
    data: () => []
})

const list = computed(() => {
    let l = props.data;
    l = addRowAndColSpan(l, 'zzhId', 'rowspan1', 'colspan1');
    l = addRowAndColSpan(l, 'fpGsId', 'rowspan2', 'colspan2');
    return l;
})

const level1 = [
    'khmc', 'dpmc', 'ywmc'
]

const level2 = [
    'companyName', 'fpgsDx', 'ksrq', 'jsrq', '_action'
]

const spanMethod = ({ row, column }) => {
    if (level1.includes(column.property)) {
        return {
            rowspan: row.rowspan1,
            colspan: row.colspan1
        }
    } else if (level2.includes(column.property)) {
        return {
            rowspan: row.rowspan2,
            colspan: row.colspan2
        }
    }
}
</script>